import { Component } from 'react';

class CustomList extends Component {
  handleChange = (id) => {
    this.props.delTodo(id);
  }
  render() {
    let { list } = this.props;
    let listItems = list.length > 0 ? list.map(item => {
      return (
        <li key={item.id}>
          <input type="checkbox" checked={item.finished} onChange={() => this.handleChange(item.id)}/> {item.name}  
        </li>
      )
    }) : <div>Opps, nothing...</div>
    return (
      <div className="list-wrapper">
        <ul>{listItems}</ul>
      </div>
    )
  }
}

export default CustomList;